<template>
  <div class="serve-detalil flex-col flex-y-center">
    <div class="serve-detalil-text flex-col">
      <div class="text-align m-b-20">
        <h2>服务详情</h2>
      </div>

      <div>
        <li>
          收到您的预约信息之后，工作人员将在12-24小时内与您联系，根据具体需求，尽快上门与您沟通确认方案。
        </li>
      </div>
    </div>

    <div class="descriptions-view">
      <h3>价目：</h3>
      <el-table :data="tabledata" border>
        <el-table-column
          prop="mj"
          label="项目"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="date"
          label="内容"
          align="center"
        ></el-table-column>
        <el-table-column prop="qian" align="center"></el-table-column>
      </el-table>
    </div>

    <div class="flex-y-center next-but flex-x-reverse">
      <el-button @click="nextchange" type="primary" style="width: 200px"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      currentRow: false,
      tabledata: [
        {
          mj: "住家 保姆",
          date: "全天24小时全职家庭服务家庭日常保洁、做饭、护理个人卫生",
          qian: "4500-8000元/月",
        },
        {
          mj: "不住家 保姆",
          date: "白天半全职家庭服务家庭日常保洁、做饭、护理个人卫生",
          qian: "4000-7000元/月",
        },
      ],
    };
  },
  methods: {
    nextchange() {
      this.$router.push({
        name: "peihu-yuding",
        query: {
          stepsactive: 2,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.serve-detalil {
  width: 100%;
  border: 1px solid #e4e7ed;
  padding: 20px;
  overflow-y: scroll;
  box-shadow: inset 0 0 10px rgba(172, 172, 172, 0.5);

  &::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }

  .serve-detalil-text {
    width: 70%;

    h3 {
      line-height: 40px;
    }

    ol li {
      line-height: 30px;
      margin-left: 20px;
    }
  }

  .descriptions-view {
    width: 70%;
    margin-top: 30px;

    h3 {
      margin-bottom: 20px;
    }
  }
}
.next-but {
  width: 100%;
  margin-top: 30px;
  margin-right: 50px;
}
</style>
